﻿@{
    ViewBag.Title = " Manage Category Filters";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<script src="~/js/intranet/ManageCategoryFilters.js"></script>

<div class="container-fluid">
    <div class="row-fluid">
        <h3>Category Filter Management</h3>
        <p>
            From this page you can create and edit filters and apply or remove them from categories.
            <br />
            The search feature below will allow you to narrow down the amount of filters that are displayed in the table.
        </p>
        <div id="filters-container">
            <div id="search-filters">
                <label for="search-filters">Search Filters:</label>
                <input type="text" id="search-filters-textbox" />
                <select id="search-field-select">
                    <option value="-1">-- choose field --</option>
                    <option value="FilterName">FilterName</option>
                    <option value="FilterURL">FilterURL</option>
                    <option value="FilterGroupName">FilterGroup</option>
                    <option value="FeatureName">FeatureName</option>
                    <option value="UseInCatName">Use in cat name</option>
                    <option value="Expression">Expression</option>
                </select>
                <input type="button" id="search-filters-apply-button" value="Apply search" class="btn btn-primary" />
                <input type="button" id="clear-search-fields" value="Clear" class="btn btn-danger" />
                <span id="search-error" class="error-message">*please enter some text and choose a field before trying to apply a search</span>
            </div>
            <div id="applied-searches"></div>
            <div class="category-filteraction">
                <div id="filter-control-buttons">
                    <input type="button" id="create-new-filter-button" value="Create New Filter" class="btn btn-primary" />
                    <input type="button" id="delete-filters-button" value="Delete Selected Filters" class="btn btn-danger" />
                </div>
                <div id="apply-filters-button"></div>
            </div>
            <div id="filter-controls">
                <input type="button" id="hide-filter-controls-button" class="close-button" value="X" />
                <h3>Filter Controls</h3>
                <input type="hidden" id="filter-id" value="-1" />
                <div id="filter-name-container" class="input-container">
                    <label for="filter-name-textbox">Filter Name: </label>
                    <input type="text" id="filter-name-textbox" />
                    <span id="filter-name-error" class="error-message">*please enter a name for the filter</span>
                </div>
                <div id="filter-controls-more">
                    <div id="filter-group-container" class="input-container">
                        <label for="group-select">Filter Group: </label>
                        <select id="group-select"></select>
                        <a id="new-group-name-link" href="#" title="Click here to create a new group name">group not listed?</a>
                        <input type="text" id="new-group-name-textbox" />
                        <a id="existing-group-link" href="#" title="Click here to view the existing group names">(show existing groupnames)</a>
                        <span id="filter-group-error" class="error-message">*please choose a group or create a new one</span>
                    </div>
                    <div id="filter-url-container" class="input-container">
                        <label for="filter-url-textbox">Filter URL:</label>
                        <input type="text" id="filter-url-textbox" />
                        <span id="filter-url-exists-error" class="error-message">*url already exists</span>
                        <span id="filter-url-error" class="error-message">*please enter a url (valid chars: alphanumeric and hyphen)</span>
                    </div>
                    <div id="feature-select-container" class="input-container">
                        <label for="feature-select">Feature Name: </label>
                        <select id="feature-select"></select>
                        <span id="feature-error" class="error-message">*choose feature</span>
                    </div>
                    <div id="expression-select-container" class="input-container">
                        <label for="expression-select">Expression:</label>
                        <select id="expression-select"></select>

                        <input type="text" class="value-textbox " />
                        <input type="button" id="add-button-value" />
                        <span id="expression-error" class="error-message">*please enter an expression</span>
                        <input type="text" id="list-value-removed" value="0" style="display: none" />
                    </div>
                    <div id="use-in-catname-container" class="input-container">
                        <label for="use-in-catname">Use in Category name: </label>
                        <input type="checkbox" id="use-in-catname" checked="checked" />
                    </div>
                    <div id="button-container" class="input-container">
                        <input type="button" id="save-button" value="Save" class="btn btn-primary" />
                        <input type="button" id="cancel-button" value="Cancel" class="btn btn-danger" />
                    </div>
                </div>
            </div>
            <div id="existing-filters"></div>
        </div>

        <div id="category-pane">
            <div id="expand-category-pane"></div>
            <div id="category-pane-content">
                <h3>Edit Category Filters</h3>
                <p>To apply filters to a category, select the category from this pane and select the filters from the filter table on the left, then click the 'Apply to Category' button.</p>
                <p>To remove filters from a category, select the category, then select the categories you want to remove from the table in this pane, then click the "Remove Selected Filters" button.</p>
                <table>
                    <tr>
                        <td class="label-cell">
                            <label for="website-select">Website:</label></td>
                        <td>
                            <select id="website-select"></select></td>
                    </tr>
                    <tr>
                        <td class="label-cell">
                            <label for="category-select">Category:</label></td>
                        <td>
                            <select id="category-select"></select></td>
                    </tr>
                </table>
                <div id="category-filter-controls">
                    <input type="button" id="remove-filters-from-category-button" value="Remove Selected Filters" class="btn btn-primary" />
                </div>
                <div id="category-filters"></div>
            </div>
        </div>
        <div id="popup-background"></div>
        <div id="apply-confirmation">
            <h3>Apply Filters?</h3>
            <p>Are you sure you want to apply the selected filters to the currently selected category?</p>
            <input type="button" id="apply-confirm-yes-button" value="Yes" class="btn btn-primary" />
            <input type="button" id="apply-confirm-no-button" value="No - Cancel" class="btn btn-danger" />
        </div>
        <div id="remove-category-filters-confirmation">
            <h3>Remove Filters?</h3>
            <p>Are you sure you want to remove the selected filters from this category?</p>
            <input type="button" id="remove-filters-yes-button" value="Yes" class="btn btn-primary" />
            <input type="button" id="remove-filters-no-button" value="No" class="btn btn-danger" />
        </div>
        <div id="remove-filters-confirmation">
            <h3>Are you sure?</h3>
            <p>
                Please note: If you delete these filters they will be removed from the websites and
                will no longer be available to customers.
            </p>
            <p>
                If you are sure you want to delete these filters, please click 'Delete'. Otherwise click 'Cancel' or press Escape to go back.
            </p>
            <input type="button" id="confirm-delete-filters-button" value="Delete" class="btn btn-primary" />
            <input type="button" id="cancel-delete-filters-button" value="Cancel" class="btn btn-danger" />
        </div>
        <div id="ajax-error"></div>
    </div>
</div>

